<template>
  <div class="">
    <van-row type="flex" justify="center" class="detail">
      <van-col span="8">
        <img :src="detailArr.coverImg" alt="" />
      </van-col>
      <van-col span="13" offset="2">
        <p class="name">{{ detailArr.name }}</p>
        <p class="price">￥{{ detailArr.price }}</p>
        <p class="quantity">货存:{{ detailArr.quantity }}</p>
        <p>
          <van-stepper
            v-model="quantity"
            theme="round"
            button-size="22"
            min="1"
            :max="detailArr.quantity"
            disabled
          />
        </p>
      </van-col>
    </van-row>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        icon="cart-o"
        text="购物车"
        :badge="badge"
        to="/cart"
      />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart(detailArr._id)"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <div class="content" v-html="detailArr.content"></div>
  </div>
</template>

<script>
import { reqDetailAPI } from "../../api/products";
import { addCartAPI, reqCartAPI } from "../../api/cart";
import Vue from "vue";
import { Toast } from "vant";
import { getToken } from "../../utils/auth";
import { Notify } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      detailArr: [],
      quantity: 1, //要添加的数量
      badge: 0, //购物车中商品的数量
    };
  },
  computed: {},
  watch: {},

  methods: {
    //获取商品的详情信息
    async getDetail(pid) {
      // const result = await this.$http.get(
      //   `http://localhost:3009/api/v1/products/${pid}`
      // );
      let result = await reqDetailAPI(pid);
      console.log(result);
      this.detailArr = result;
    },
    //获取购物车中的商品数量
    async getCart() {
      //如果有用户信息了才可以，获取购物车中的商品数量
      if (getToken()) {
        let result = await reqCartAPI();
        this.badge = result.length;
        console.log("购物车数量", this.badge);
      }
    },
    //添加购物车
    async addCart(pid) {
      if (!getToken()) {
        Notify("请先登录");
        this.$router.push({
          path: "/login",
        });
      } else {
        let result = await addCartAPI({
          product: pid,
          quantity: this.quantity, //设置下只能添加一件
        });
        console.log(result);
        if (result.code == "success") {
          Toast.success("加入购物车成功");
          // 跳转到购物车页面
          this.$router.push({
            path: "/cart",
          });
        }
      }
    },
  },
  created() {
    let pid = this.$route.params.pid;
    console.log(pid);
    this.getDetail(pid);
    this.getCart(); //获取购物车信息
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.detail {
  margin: 20px 0;
  line-height: 1.8;
}
.detail img {
  width: 130px;
}
.detail .name {
  font-weight: bold;
}
.detail .price {
  font-size: 20px;
  color: red;
}
.detail .quantity {
  color: rgb(100, 98, 98);
  font-size: 14px;
}
.van-stepper {
  margin-top: 10px;
}
.content {
  padding-bottom: 55px;
}
.content >>> img {
  width: 100%;
}
.van-goods-action {
  height: 55px;
}
</style>
